<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="detail">
			<!-- <view class="banner">
				<image class="image" src="../../static/img/item/10001.jpg" mode=""></image>
			</view> -->
			<view class="address">
				<view class="addtitle">需支付金额:</view>
				<view class="addtitle">{{money}}</view>
				<view class="addtitle">归属人:</view>
				<view class="addtitle">{{sellername}}</view>
			</view>
			<view class="address">
				<view class="addtitle">收款地址</view>
				<!-- <view class="addtext">广东省深圳市罗湖区人民南路2009号</view> -->
			</view>
			<view class="radio">
				<uv-radio-group v-model="payment" placement="column" iconPlacement="right">
					<uv-radio 
						:customStyle="{margin: '8px'}" 
						v-for="(item, index) in radiolist" 
						:key="index" 
						v-if="item.show"
						:label="item.name" 
						@change="typeChage"
						:name="item.id">
					</uv-radio>
				</uv-radio-group>
			</view>
			<view class="code">
				<view class="codeTitle">收款码</view>
				<view v-if="payment == 3" class="car_list">
						<text>银行名称：</text>
						<input class="uni-input" v-model="bankData.bankName" disabled type="text" />
				</view>
				<view v-if="payment == 3" class="car_list">
						<text>收款姓名：</text>
						<input class="uni-input" v-model="bankData.name" disabled  type="text" />
				</view>
				<view v-if="payment == 3" class="car_list">
					<text>收款账号：</text>
					<input class="uni-input" v-model="bankData.card" disabled  type="text" />
				</view>
				<image v-if="payment == 1"  class="payImage" :src="alipay.qrcode" mode=""></image>
				<image v-if="payment == 2"  class="payImage" :src="wx.qrcode" mode=""></image>
				<view class="skm" @click="uploadEvent">
					<image :src="upload" mode=""></image>
				</view>
				<button class="exitbtn" @click="submitClick">确认打款</button>
			</view>
			
		</view>
		<payKeyboard v-if="showKeyBoard" title="Mi安全键盘" @success="enterSuccess" @close="close"></payKeyboard> 
	</view>
</template>

<script>
	import { API_BASE_URL} from '@/utils/appConfig.js';
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue';
	import {getPayInfo,submitPay} from '@/api/warehouse.js'
	export default{
		components: { payKeyboard },
		data(){
			return{
				navstyle: {
					title: "买方仓库",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				typeFlag:true,
				titleStyle: {
					fontWeight: 700
				},
				bankData:{},
				orderId:'',
				alipay:{},
				wx:{},
				money:0.00,
				sellername:'',
				showKeyBoard:false,
				payment:1,
				payListId:0,
				radiolist:[	{
						name:'支付宝二维码',
						id:1,
						show:true,
					},
					{
						name:'微信二维码',
						id:2,
						show:true,
					},
					{
						name:'银行卡账号',
						id:3,
						show:true,
					}],
				upload:'../../static/img/bonus/scpz.png',
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			getPayInfo({orderId:this.orderId}).then(response => {
				console.log(response,4444)
				this.alipay = response.data.payInfo.alipay;
				this.bankData = response.data.payInfo.bank
				this.wx = response.data.payInfo.wx;
				this.money = response.data.money;
				this.sellername = response.data.seller;
				this.payListId = response.data.payListId;
				if(this.bankData.status == 0){
					this.radiolist[2].show = false
				}else{
					this.radiolist[2].show = true
				}
				if(this.wx.status == 0){
					this.radiolist[1].show = false
				}else{
					this.radiolist[1].show = true
				}
				if(this.alipay.status == 0){
					this.radiolist[0].show = false
				}else{
					this.radiolist[0].show = true
				}
			
			});
			
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/warehouse/buyer' // 替换成上一页的路径
				});
			},
			typeChage(item){
				this.state = item;
				if(item == 3){
					
				}else{
					
				}
			},
			uploadEvent() {
				var t = this;
				uni.chooseFile({
					count: 1,
					type: "image",
					success: function(e) {
						var n = e.tempFilePaths[0];
						t.uploadImagesEvent(n),
						uni.showLoading({
							title: "上传中",
							mask: !0
						})
					}
				})
			},
			uploadImagesEvent(t) {
				var e = this;
				uni.uploadFile({
					url: API_BASE_URL + "/index/upload",
					filePath: t,
					header: {
						token: uni.getStorageSync("token")
					},
					success: function(t) {
						var n = JSON.parse(t.data);
						1 != n.code && "1" != n.code || (e.upload = n.data.fullurl,
						uni.showToast({
							title: n.msg,
							icon: "success",
							duration: 2e3
						}))
					},
					fail: function(t) {
						console.log(t, "上传失败")
					},
					complete: function() {
						uni.hideLoading()
					}
				})
			},
			submitClick(){
				if(this.upload == "../../static/img/bonus/scpz.png"){
					uni.showToast({
						title: "请上传支付凭证",
						icon: "success",
						duration: 2000
					});
					return
				}
				this.showKeyBoard = true;
				
			},
			// 输入正确的回调
			enterSuccess(password) {
				console.log(password,4444)
				let payId = "0";
				if(this.payment == 1){
					payId = this.alipay.id
				}else if(this.payment == 2){
					payId = this.wx.id
				}else{
					payId = this.bankData.id
				}
				submitPay({
					orderId:this.orderId,	
					payId:payId,
					paypass:password,
					payPic:this.upload,
					payListId:this.payListId,
				}).then(response=>{
					if(response.code == 1){
						uni.showToast({
							title: response.msg,
							duration: 1000
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/warehouse/buyer'
							})	
						},2000)
					}else{
						uni.showToast({
							title: response.msg,
							duration: 2000
						});
					}
				})
				this.showKeyBoard = false
			},
			// 点击[取消] 关闭输入框 的回调
			close(){
				this.showKeyBoard = false
			},
		}
	}
</script>

<style>
	.banner{
		width: 100%;
		height:80px;
	}
	.image{
		width: 100%;
		height: 80px;
	}
	.address{
		padding: 10px;
	}
	.addtitle{
		font-size: 14px;
		font-weight: bold;
	}
	.addtext{
		padding-top: 10px;
		font-size: 12px;
	}
	.radio{
		padding: 0 10px 10px 4px;
	}
	.code{
		text-align:center;
	}
	.codeTitle{
		font-size: 18px;
		padding: 10px;
		font-weight: bold;
	}
	.payImage{
		width: 185px;
		height: 206px;
		border-radius: 5px;
		border-radius: 5px;
	}
	.car_list {
	    display: flex;
	    align-items: center;
	    color: #3d4249;
	    width: 96%;
	    margin: auto;
	    margin-bottom: 10px;
	    padding: 10px;
	    border-radius: 3px;
	}
	.car_list .uni-input{
	    width: 70%;
	    height: 31px;
	    font-size: 16px;
	    line-height: 21px;
	    display: flex;
	    align-items: center;
	    background-color: #f1f1f1;
	    padding: 5px 10px 5px 5px;
	    border-radius: 4px 4px;
	}
	.skm image{
	    width: 106px;
	    height: 106px;
	    border: #ed6266 solid 1px;
	    border-radius: 5px;
	}
	.exitbtn{
		width: 40%;
		border-radius: 50px;
		background: linear-gradient(135deg, #d66c6b, #ed6266);
		font-size: 14px;
		margin: 10px auto 0 auto;
		color: #fff;
		padding: 3px 0;
	}
</style>